/**
 * vue-cli 打包配置文件
 * vue.config.js
 */
const path = require("path");
// gzip压缩
const CompressionPlugin = require("compression-webpack-plugin");
// webpack cdn 插件
// const WebpackCdnPlugin = require("webpack-cdn-plugin");

// typescript 相关引用
const {merge} = require('webpack-merge'); // {merge} 用大括号，ES6引用，解决merge is not a function问题
const tsImportPluginFactory = require('ts-import-plugin');

// 构建工具函数
const utils = {
  // 处理路径
  resolve(dir) {
    return path.join(__dirname, dir);
  }
}

// 环境配置
const configEnv = require("./config");

// CDN配置
// const configCdn = require("./config/cdn.js");

// 判断是否是生产环境
// let isProd = process.env.NODE_ENV == "production" ? true : false;
console.log('NODE_ENV@@:', process.env.NODE_ENV)
console.log('VUE_APP_MODE@@:', process.env.VUE_APP_MODE)
let isProduction = process.env.VUE_APP_MODE == "production" ? true : false;

const config = {
  // eslint检测 默认是开启的
  lintOnSave: true,
  // 资源全局路径前缀
  publicPath: configEnv.publicPath,
  //静态资源目录(js,css,img,fonts)这些文件都可以写里面
  assetsDir: "assets",
  // 打包时不生成.map文件
  productionSourceMap: false,
  // 输出文件目录
  outputDir: isProduction ? "dist_production" : "dist_testing",
  // webpack-dev-server 相关配置
  devServer: {
    // 设置主机地址
    host: "0.0.0.0",
    // 设置默认端口
    port: 8088,
    // 禁用host验证
    disableHostCheck: true,
    // 设置代理
    proxy: {
      [configEnv.baseApi]: {
        // 目标 API 地址
        // 开发环境
        target: configEnv.target,
        // 如果要代理 websockets
        ws: false,
        // 将主机标头的原点更改为目标URL(设置跨域)
        changeOrigin: true,
        pathRewrite: {
          [`^${configEnv.baseApi}`]: "",
        },
      },
    },
  },
  configureWebpack() {
    const mergeConfig = {
      plugins: [
        // CDN导入, 如果不需要cdn加速，注释下面代码就可以
        // new WebpackCdnPlugin(configCdn),
      ],
    };
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      console.log("\n---生产环境---\n");
      console.log(`1.gzip压缩(需要nginx开启gzip)`);
      mergeConfig.plugins.push(
        new CompressionPlugin({
          // filename: "[path].gz[query]",
          // algorithm: "gzip",
          test: /\.js$|\.html$|\.css/,
          threshold: 10240,
          minRatio: 0.8,
          deleteOriginalAssets: false,
        })
      );
    }
    return mergeConfig;
  },
  chainWebpack(config) {
    // 移除资源预加载(路由懒加载才能正常使用)
    config.plugins.delete("preload"); // TODO: need test
    config.plugins.delete("prefetch"); // TODO: need test
    // 设置别名
    config.resolve.alias
      .set("@", utils.resolve("src")) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set("_c", utils.resolve("src/components"))
      .set("_conf", utils.resolve("config"));
    // 设置 svg-sprite-loader
    config.module
      .rule("svg")
      .exclude.add(utils.resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(utils.resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();
    // 增加ts相关
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        });
        return options;
      });
    
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            // 'text-color': '#111',
            // 'border-color': '#eee',
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径
            hack: `true; @import "@/assets/css/theme_var.less";`,
          },
        },
      },
      sass: {
        // 配置scss 全局样式文件 支持全局变量
        prependData: `
       @import "@/assets/css/common.scss";
     `,
      },
    },
  },
};
// 打印webpack配置信息
// console.log(JSON.stringify(config))

module.exports = config;
